<template>
    <div class="login">
        <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" class="demo-ruleForm">
               <el-form-item prop="username">
                    账号:<el-input  class="el-input" v-model="ruleForm.username"></el-input>
              </el-form-item>

               <el-form-item prop="password">
                   密码: <el-input class="el-input"  type="password" v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form>
    </div>
</template>
<script>
import {login} from '@/api/index.js'
export default{
  data () {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 真正的验证用户是否输入合法的数据，如果没有输入合法，则阻止本次请求
      // 我们要对表单进行验证，就需要调用表单的valiate方法,这个函数有一个回调，回调有一个参数，这个参数为true,则说明通过验证，否则则输入不合法
      methods: {
        submitForm (formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('错了错了错了')
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.el-input{
  padding: 20px;
}
</style>
